<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    max: {
      type: Number,
      default: 99
    },
    // 未读数量
    unreadNum: {
      type: Number,
      default: 70
    },
    top: {
      type: [Number, String],
      default: 30
    },
    right: {
      type: [Number, String],
      default: 6
    }
  })

  // 定位样式
  const badgeStyle = computed(() => {
    return {
      top: props.top + 'rpx',
      right: props.right + 'rpx'
    }
  })

  const num = computed(() => {
    if (props.unreadNum <= props.max) {
      return props.unreadNum
    } else {
      return props.max + '+'
    }
  })
</script>

<template>
  <view
    v-if="props.unreadNum > 0"
    class="bit-badge"
    :style="badgeStyle"
  >
    <text class="bit-badge-num">{{ num }}</text>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  .bit-badge {
    position: absolute;
    z-index: 2;
    width: 40rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rpx 5rpx;
    border-radius: 15rpx;
    background-color: var(--badge-bg-color);
    &-num {
      font-size: 20rpx;
      color: #fff;
    }
  }
</style>
